<template>
	<globalModal
		:title="title"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		:afterClose="close"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item label="分配角色" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<div>
						<div :style="{ borderBottom: '1px solid #E9E9E9' }">
							<a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll"
								>全选</a-checkbox
							>
						</div>
						<a-checkbox-group
							style="width: 100%"
							:options="plainOptions"
							v-model="checkedList"
							@change="onChange"
						>
							<a-row>
								<a-col :span="24">
									<span slot="label" slot-scope="{ value }">{{ value }}</span>
								</a-col>
							</a-row>
						</a-checkbox-group>
					</div>
				</a-form-item>
			</a-form>
		</a-spin>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import QS from 'qs';
export default {
	name: 'setRoleModal',
	mixins: [ModalMixins],
	data() {
		return {
			indeterminate: true,
			checkAll: false,
			checkedList: [],
			plainOptions: [],
			orgId: '',
		};
	},
	created() {},
	methods: {
		show(record) {
			this.title = '设置角色';
			this.initInfo(record);
		},
		initInfo(record) {
			this.mdl = Object.assign({}, record);
			this.orgId = this.mdl.orgId;
			if (this.plainOptions.length == 0) {
				this.getAllRole();
			} else {
				this.fillSelectRole();
			}
			this.visible = true;
		},
		/* 回填选中的角色 */
		/* fillSelectRole() {
			if (this.plainOptions.length > 0) {
				let roleIds = this.mdl.roleIds;
				this.checkedList = this.plainOptions.filter(item => roleIds.includes(item.value)).map(item => item.value);
			}
			this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
			this.checkAll = this.checkedList.length === this.plainOptions.length;
		}, */
		fillSelectRole() {
			if (this.plainOptions.length > 0) {
				let roleIds = this.mdl.roleList ? this.mdl.roleList.map((item) => item.roleId) : [];
				console.log('roleIds', roleIds);
				this.checkedList = this.plainOptions
					.filter((item) => roleIds.includes(item.value))
					.map((item) => item.value);
			}
			this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
			this.checkAll = this.checkedList.length === this.plainOptions.length;
		},
		close() {
			this.checkedList = [];
			this.checkAll = false;
			this.indeterminate = true;
			this.confirmLoading = false;
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					/* 处理地址 */
					let parameter = {
						userId: this.mdl.userId,
						roleIds: this.checkedList,
					};
					_this.confirmLoading = true;
					this.$postAction(sysManageapi.userUrl.setUserRole, parameter)
						.then((res) => {
							if (res.code == 1) {
								_this.$message.success('保存成功');
								_this.$emit('ok');
								_this.visible = false;
							}
						})
						.catch(() => {
							_this.confirmLoading = false;
						});
				}
			});
		},
		/* 获取所有角色 */
		getAllRole() {
			this.$postAction(sysManageapi.roleUrl.getAllList, {
				orgId: this.orgId || '',
			}).then((da) => {
				if (da.code == 1 && da.data.length > 0) {
					this.plainOptions = da.data
						.filter((item) => item.roleCode != 'mang_admin')
						.map((item) => {
							return {
								label: item.roleName,
								value: item.roleId,
								name: item.roleCode,
							};
						});
				} else {
					this.plainOptions = [];
				}
				this.fillSelectRole();
			});
		},
		onChange(checkedList) {
			this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
			this.checkAll = checkedList.length === this.plainOptions.length;
		},
		onCheckAllChange(e) {
			Object.assign(this, {
				checkedList: e.target.checked ? this.plainOptions.map((item) => item.value) : [],
				indeterminate: false,
				checkAll: e.target.checked,
			});
		},
	},
};
</script>

<style scoped lang="less">
/deep/ .ant-checkbox-group-item {
	display: inline-block;
	width: calc(49% - 8px);
}
</style>
